<template>
  <div class="container">
    <!-- 路径导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公司管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    &lt;!&ndash; 表格区域 &ndash;&gt;-->
    <!--    <el-table :data="companyList" border style="width: 100%">-->
    <!--      <el-table-column type="selection" width="55"></el-table-column>-->
    <!--      <el-table-column prop="id" label="ID"></el-table-column>-->
    <!--      <el-table-column prop="name" label="公司名">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="address" label="地址">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="telephone" label="电话">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="simplyIntroduce" label="简介">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="email" label="邮箱">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="code" label="二维码">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-image style="width: 100px; height: 100px;"-->
    <!--                    :src="url + 'downLoad?filename=' + scope.row.code">-->
    <!--          </el-image>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="img" label="公司图片">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-image style="width: 100px; height: 100px;"-->
    <!--                    :src="url1 + 'downLoad?filename=' + scope.row.img">-->

    <!--          </el-image>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">-->


    <!--      <el-table-column label="操作">-->
    <!--&lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;-->
    <!--          <el-link type="primary" @click="toEditCompany(scope.row)">编辑公司</el-link>-->
    <!--          <el-link type="primary" @click="deleteCompany(scope.row.id)">删除公司</el-link>-->
    <!--&lt;!&ndash;        </template>&ndash;&gt;-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <el-form :model="company">
      <el-form-item label="公司名" prop="name" label-width="80px">
        <el-input placeholder="请输入公司名称" v-model="company.name"></el-input>
      </el-form-item>
      <el-form-item label="地址" label-width="80px">
        <el-input placeholder="请输入公司地址" v-model="company.address"></el-input>
      </el-form-item>
      <el-form-item label="电话" label-width="80px">
        <el-input placeholder="请输入电话号码" v-model="company.telephone"></el-input>
      </el-form-item>
      <el-form-item label="公司简介"
        label-width="80px">
        <!-- 富文本编辑器组件 -->
        <quill-editor v-model="company.simplyIntroduce"></quill-editor>
      </el-form-item>
      <el-form-item label="邮箱" label-width="80px">
        <el-input placeholder="请输入邮箱" v-model="company.email"></el-input>
      </el-form-item>


      <el-row type="flex" :gutter="200" justify="start">
        <el-col :span="8" style="margin-left: 80px;position: relative;top: 0px">
          <!--          <el-form-item label="二维码"   label-width="80px">-->
          <!--            <el-upload :action="url + 'upload'" list-type="picture-card" :on-success="handleSuccess" :limit="1"-->
          <!--                       :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList">-->
          <!--              <i class="el-icon-plus"></i>-->
          <!--            </el-upload>-->
          <!--            &lt;!&ndash; 预览图片 &ndash;&gt;-->
          <!--            <el-dialog :visible.sync="dialogVisible">-->
          <!--              <img width="100%" :src="dialogImageUrl" alt="">-->
          <!--            </el-dialog>-->
          <!--          </el-form-item>-->
          <p style="position: absolute;left: 30px">公司图片</p>
          <el-image :src="url + 'downLoad?filename=' + company.img" style="width: 130px; height: 130px">

          </el-image>
        </el-col>

        <el-col :span="3">
          <p style="position: absolute;left: 550px">二维码</p>
          <el-image :src="url + 'downLoad?filename=' + company.code" style="width: 130px; height: 130px">

          </el-image>
        </el-col>

      </el-row>
      <!--      <div style="margin-left: 900px" class="dialog-footer">-->
      <!--        <el-button >取 消</el-button>-->
      <!--        <el-button type="primary" @click="addCompany">确 定</el-button>-->
      <!--      </div>-->
      <!--        -->

    </el-form>
    <!-- 分页区域 -->

    <!--    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
    <!--                   :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]"-->
    <!--                   :page-size="queryInfo.pageSize"-->
    <!--                   layout="total, sizes, prev, pager, next, jumper" :total="total">-->
    <!--    </el-pagination>-->
    <div class="baocun">
      <el-button type="primary" @click="addCompany">保存</el-button>
    </div>

  </div>
</template>
<script>
import { url } from "@/util/tools";
import { url1 } from "@/util/tools";

export default {
  data() {
    return {
      url: '',
      url1: '',
      // 查询信息对象
      queryInfo: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 183,
      companyList: [],
      title: '',
      dialogFormVisible: false,
      company: {
        "id": "",
        "name": "",
        "address": "",
        "telephone": "",
        "simplyIntroduce": "",
        "email": '',
        "code": "",
        "img": ""
      },
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: [],
      dialogVisible1: false,
      dialogImageUrl1: '',
      fileList1: []
    }
  },
  methods: {
    // // 删除文章
    // deleteCompany(id) {
    //   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //       .then(() => {
    //         this.$http.delete('company/' + id)
    //             .then(resp => {
    //               if (resp.data.status == 200) {
    //                 this.$message.success(resp.data.message)
    //                 this.queryList()
    //               } else {
    //                 this.$message.error(resp.data.message)
    //               }
    //             })
    //       })
    //       .catch(() => {
    //         this.$message({
    //           type: 'info',
    //           message: '已取消删除'
    //         })
    //       })
    // },

    // 处理上传成功的函数
    handleSuccess(response) {
      // 把上传后的二维码路径，交给文章对象的tabularChart
      this.company.code = response.message;
    },
    // 删除二维码的事件
    handleRemove(file, fileList) {
      console.log(file, fileList);
      // 移除数据
      this.company.code = '';
    },

    // 预览二维码事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 处理上传成功的函数
    handleSuccess1(response) {
      // 把上传后的图片路径，交给文章对象的tabularChart
      this.company.img = response.message;
    },
    // 删除图片的事件
    handleRemove1(file1, fileList1) {
      console.log(file1, fileList1);
      // 移除数据
      this.company.img = '';
    },

    // 预览图片事件
    handlePictureCardPreview1(file1) {
      this.dialogImageUrl1 = file1.url;
      this.dialogVisible1 = true;
    },

    // toEditCompany(row){
    //   this.company=row;
    //   this.title="修改文章";
    //   this.dialogFormVisible=true;
    //   this.fileList=[{
    //     url: url + 'downLoad?filename=' + row.code,
    //   }];
    //   this.fileList1=[{
    //     url:url + 'downLoad?filename=' +row.img,
    //   }];
    // },


    //取消对话框
    // cancle() {
    //   this.dialogFormVisible = false;
    //   this.company={
    //     "id":"",
    //     "name":"",
    //     "address":"",
    //     "telephone":"",
    //     "simplyIntroduce":"",
    //     "email":'',
    //     "code":"",
    //     "img":""
    //   }
    // },

    //添加文章
    addCompany() {
      //       if (this.company.id){
      this.$http.put("company/edit", this.company)
        .then(resp => {
          if (resp.data.status == 200) {
            // 消息提示
            this.$message.success('修改成功！');
            // 清空数据
            this.company = {
              "id": "",
              "name": "",
              "address": "",
              "telephone": "",
              "simplyIntroduce": "",
              "email": '',
              "code": "",
              "img": ""
            }

            // 重新查询
            this.queryList()
          } else {
            this.$message.error('接口异常！')
          }
        })
      //
      //       }else {
      //         this.$http.post("company/add", this.company)
      //             .then(resp=>{
      //               if (resp.data.status == 200) {
      // // 消息提示
      //                 this.$message.success('添加成功！');
      // // 清空数据
      //                 this.company = { // 文章对象
      //                   "id":"",
      //                   "name":"",
      //                   "address":"",
      //                   "telephone":"",
      //                   "simplyIntroduce":"",
      //                   "email":'',
      //                   "code":"",
      //                   "img":"",
      //                 }
      //                 this.dialogFormVisible=false;
      //                 this.queryList()
      //               }
      //               else {
      //                 this.$message.error("接口异常")
      //               }
      //             })
      //       }
      //       this.fileList1=[]
      //       this.fileList = []
      //     },
      //     toAddCompany(){
      //       this.title="新增公司";
      //       this.dialogFormVisible=true;
      //
    },
    queryList() {
      // 调用后端接口来获取数据
      this.$http.get('company/findByPage', {
        params: this.queryInfo
      })
        .then(resp => {
          if (resp.data.status == 200) {
            // console.log(resp.data)
            this.company = resp.data.data.list[0];
            //console.log(this.articleList)
            console.log(this.company)
          } else {
            this.$message.error('查询失败！')
          }
        })
    },

    //     handleSizeChange(size) {
    //       console.log('每页显示数量发生改变');
    //       this.queryInfo.pageSize = size;
    //       this.queryInfo.pageNum = 1;
    // // 重新查询
    //       this.queryList()
    //     },
    //     handleCurrentChange(num) {
    //       console.log('页码发生改变');
    //       this.queryInfo.pageNum=num;
    //       this.queryList();
    //     }
  },

  mounted() {
    this.queryList();
    this.url = url;
    this.url1 = url1
  }
}
</script>
<style>
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
  min-height: 200px;
}

.baocun {
  padding-top: 50px;
  margin: auto 50%;
}
</style>